<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="../../引入vue2.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* #region 头部logo样式 */
      .nav {
        height: 44px;
        background-color: white;
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
      }
      .nav > .logo {
        width: 177px;
        height: 27px;
      }
      .nav > .nav-right {
        height: 27px;
        width: 82px;
        animation: move 3s infinite;
      }
      .nav > .nav-right p {
        color: white;
        border: 1px solid rgb(5, 9, 244);
        border-radius: 5px;
        background-color: rgb(5, 9, 244);
      }
      .nav-right > div {
        height: 44px;
        text-align: center;
        line-height: 25px;
      }
      @keyframes move {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-44px);
        }
        100% {
          transform: translateY(0);
        }
      }
      /* #endregion */

      /* #region 轮播样式 */
      .swiper-img {
        height: 130px;
      }
      /* #endregion */

      /* #region 大触直播样式 */
      .live_video {
        padding: 0 10px;
      }
      .live_video .author,
      .live_course .author {
        display: flex;
        align-items: center;
      }
      .live_video .author > img,
      .live_course .author > img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .live_item > p {
        font-weight: bolder;
        margin: 10px 0;
      }
      .live_video > .live_item > img {
        width: 100%;
        height: 130px;
      }
      .live_item > .count {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .live_item > .count > span {
        color: gray;
        font-size: 14px;
      }
      .live_course {
        display: flex;
        justify-content: space-around;
      }
      .live_course > .live_item {
        width: 40%;
      }
      .live_course > .live_item > img {
        width: 100%;
        height: 100px;
      }
      /* #endregion */

      /* #region 热门教程样式 */

      /* #endregion */

      /* #region 分类头部公共组件样式 */
      .header {
        height: 40px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: lightblue;
      }
      /* #endregion */
    </style>
  </head>
  <body>
    <div id="app">
      <!-- #region 头部logo -->
      <div class="nav">
        <img
          class="logo"
          src="https://assets-cdn.lanqb.com/lanqb/logo05.png"
          alt=""
        />
        <div class="nav-right">
          <div><p>注册有礼</p></div>
          <div>
            <span>注册</span>
            <span>登录</span>
          </div>
        </div>
      </div>
      <!-- #endregion -->
      <!-- #region 轮播 -->
      <el-carousel height="150px">
        <el-carousel-item v-for="swiper in swipers" :key="swiper.id">
          <img
            class="swiper-img"
            :src="`https://ss.lanqb.com/${swiper.picture}`"
            alt=""
          />
        </el-carousel-item>
      </el-carousel>
      <!-- #endregion -->
      <!-- #region 大触直播 -->
      <div class="live">
        <header_title title="大触直播"></header_title>
        <div class="live_video">
          <live_item v-if="lives.length" :live="lives[0]" index="0"></live_item>
        </div>
        <div class="live_course">
          <live_item
            v-if="lives.length"
            v-for="l in lives.slice(1)"
            :key="l.id"
            :live="l"
          ></live_item>
        </div>
      </div>


      <title_com title="热门教程"></title_com>
    <div class="hotList">
      <hot_com :content="item" v-for="item in Hot" :key="item.id"></hot_com>
    </div>

    <title_com title="图文教程"></title_com>
    <content_com
      :content="item"
      v-for="item in tutorials"
      :key="item.id"
    ></content_com>
    <title_com title="推荐资讯"></title_com>
    <content_com
      :content="item"
      v-for="item in news"
      :key="item.id"
    ></content_com>

    </div>

    

    <template id="header">
      <div class="header">
        <div class="h_title">{{title}}</div>
        <span>查看更多&gt;</span>
      </div>
    </template>
    <template id="liveCom">
      <div class="live_item">
        <div class="author">
          <img
            :src="`https://ss.lanqb.com/${live.profile.avatar}`"
            alt=""
            class="author_avator"
          />
          <span>{{live.profile.nickname}}</span>
        </div>
        <p>{{live.title}}</p>
        <img :src="`https://ss.lanqb.com/${live.banner}`" alt="" />
        <div class="count">
          <span class="timer">时间: {{live.begin_at}}</span>
          <span
            >{{index?`${live.statistic.purchases}感兴趣`:`♥${live.statistic.purchases}`}}</span
          >
        </div>
      </div>
    </template>
  </div>

  <!-- 导航头部 -->
  <template id="nav">
    <div class="nav">
      <img
        class="logo"
        src="	https://assets-cdn.lanqb.com/lanqb/logo05.png"
        alt=""
      />
      <div class="nav-right">
        <div><p>注册有礼</p></div>
        <div>
          <span>注册</span>
          <span>登陆</span>
        </div>
      </div>
    </div>
  </template>


  <!-- 热门教程 -->
  <template id="hot">
    <div class="hot">
      <div class="imgg">
        <img :src="	'https://ss.lanqb.com/'+ content.posters.banner" alt="" />
        <p>{{content.title}}</p>
      </div>
    </div>
  </template>

  <!-- 推荐咨询 -->
  <template id="title">
    <div class="title">
      <h3>{{title}}</h3>
      <p>查看更多&gt;</p>
    </div>
  </template>

  <!-- 图文教程 -->
  <template id="content">
    <div class="content">
      <div class="imgs">
        <img :src="	'https://ss.lanqb.com/'+content.imgCover" />
      </div>
      <div class="contents">
        <h3>{{content.title}}</h3>
        <p v-if="content.user_profile">
          老师:{{content.user_profile.nickname}}
        </p>
        <p v-else="">{{content.created_at}}</p>
      </div>
    </div>
  </template>
    <script>
      let hot_com = {
        template: "#hot",
        props: ["content"],
      };

      let title_com = {
        template: "#title",
        props: ["title"],
      };

      let content_com = {
        template: "#content",
        props: ["content"],
      };

      const header_title = {
        template: "#header",
        props: ["title"],
      };
      const live_item = {
        template: "#liveCom",
        props: ["live", "index"],
      };
      const vm = new Vue({
        el: "#app",
        data: {
          swipers: [], // 轮播图数据
          lives: [], // 大触直播数据
          coursees: [], // 热门教程
          news: [],
          tutorials: [],
          Hot: [],
        },
        methods: {
          request(url, type) {
            fetch(url)
              .then(response => response.json())
              .then(data => {
                switch (type) {
                  case "swiper":
                    this.swipers = data.data;
                    break;
                  case "live":
                    this.lives = data.live.slice(0, 3);
                    break;
                  case "swiper":
                    console.log(data);
                    break;
                  default:
                    break;
                }
              });
          },
        },
        mounted() {
          // 首次渲染时，lives数组是空数组，因此首页渲染组件时，并不能从数组中获取数据，页面会报错。但是请求结果后续又添加到lives上了，造成组件二次渲染，最终页面是可以正常展示数据的。
          // 解决首次渲染报错问题：给组件添加v-if条件，等数组有数据了再展示组件。
          console.log("----", this.lives.length);
        },
        
        created() {
          // 轮播图请求
          this.request(
            "https://m.lanqb.com/api/home/banner?type=m&local_code=10&limit=6&order=weight",
            "swiper"
          );
          // 大触直播请求
          this.request(
            "https://m.lanqb.com/api/daniu?link=paging&live=3&is_live=1&limit=3&page=1",
            "live"
          );
          // 推荐资讯
          this.request("https://m.lanqb.com/api/home/news",
          "news");
          // 图文教程
          this.request("https://m.lanqb.com/api/home/graphic-tutorials",
          "tutorials");
          // 热门教程
          this.request("https://m.lanqb.com/api/home/series",
          "Hot")
        },
        
        components: {
          header_title,
          live_item,
          title_com,
          content_com,
          hot_com,
        },
      });
    </script>
  </body>
</html>